import * as turf from "@turf/turf";
import { Map } from "mapbox-gl";
import { ILayerProps } from "src/types/index";
import Base from "./Base";
export default class MenuMapLayer extends Base {
  layerId: string;
  layerIdLine: string;
  layerIdPolygon: string;
  checkedKeys: number[];
  isLoadedKeys: number[];
  constructor(map: Map, layerProps: ILayerProps) {
    let SOURCE_NAME = "MenuMapLayer";
    super(map, layerProps, SOURCE_NAME);

    this.layerId = this.getLayerName("default")
    this.layerIdLine = this.getLayerName("line");
    this.layerIdPolygon = this.getLayerName("polygon");

    // 只要展示存在于 checkedKeys 中的数据
    this.checkedKeys = [];
    // 已加载过数据的 checkedKeys
    this.isLoadedKeys = [];

    this.init();
  }

  init() {
    // source中存着点\面\线的数据
    this.map.addSource(this.sourceId, {
      type: "geojson",
      data: turf.featureCollection(this.features) as any,
    });

    // 加点
    this.map.addLayer({
      id: this.layerId,
      type: "symbol",
      source: this.sourceId,
      layout: {
        "icon-allow-overlap": true,
        "text-allow-overlap": true,
        "icon-image": ["get", "typename"], // 要提前初始化好这个资源！
        "icon-size": 0.45,
        "text-field": ["get", "name"], // 此属性对应图标注释
        "text-size": [
          "interpolate",
          ["linear"],
          ["zoom"],
          10,
          0,
          10.001,
          14,
          14,
          14,
        ],
        "text-offset": [0, 1.25], // 设置图标与图标注相对之间的距离
        "text-anchor": "top",
      },
      paint: {
        "text-halo-color": "rgb(255,255,255)",
        "text-halo-width": 2,
        "text-color": ["get", "fontColor"],
      },
      // filter: ["==", "$type", "Point"], // 不仅是类型区分  还要用checkedKeys来过滤当前的点
      filter: ["all", ["==", "$type", "Point"], ["==", "visible", true]], // 如果需求后面花哨了 应该要自己定义一个type来区分 或 另起一个layer来做定制化layer，反正这一个$type应该是不够用的
    });

    // 加面
    this.map.addLayer({
      id: this.layerIdPolygon,
      type: "fill",
      source: this.sourceId,
      layout: {},
      paint: {
        "fill-color": "#0080ff", // blue color fill
        "fill-opacity": 0.5,
      },
      filter: ["all", ["==", "$type", "Polygon"], ["==", "visible", true]],
    });

    // 加线
    this.map.addLayer({
      id: this.layerIdLine,
      type: "line",
      source: this.sourceId,
      layout: {},
      paint: {
        "line-color": "#000",
        "line-width": 2,
      },
      filter: ["all", ["==", "$type", "LineString"], ["==", "visible", true]],
    });
  }
}
